<template>
  <!-- 登录页 -->
  <div class="loginPage">
    <!-- 手机顶部 -->
    <img src="@/assets/phoneTop.jpg" alt class="phoneTop" />

    <div class="login">
      <!-- 返回按钮 -->
      <div class="iconfont iconicon-" @click="$router.back()"></div>
      <!-- 头条logo -->
      <div class="logo">
        <img src="@/assets/logo.png" />
      </div>

      <!-- 使用vant 表单 -->
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          placeholder="用户名 / 手机号码"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin-top:13.333vw;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    onSubmit(values) {
      // console.log("submit", values);
      this.$axios({
        url: "/login",
        method: "POST",
        data: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        console.log(res);
        const { message } = res.data;

        console.log(message);

        if (message === "登录成功") {
          this.$toast.success(message);
          const { token } = res.data.data;
          const { id } = res.data.data.user;

          localStorage.setItem("userToken", token);
          localStorage.setItem("userId", id);

          this.$router.push("/personal");
        } else {
          this.$toast.fail(message);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.phoneTop {
  width: 100%;
}

.login {
  padding: 7.222vw 5vw;

  .iconicon- {
    font-size: 5.556vw;
  }

  .logo {
    text-align: center;
    padding: 11vw;

    img {
      height: 16vw;
      width: 28vw;
    }
  }

  .van-cell {
    border-bottom: 0.278vw solid #000;
    padding: 5.556vw 0;

    /deep/ .van-field__control {
      font-size: 5vw;
    }
  }

  .van-button {
    background-color: #fd4a68;
    border: #fd4a68;
    height: 13.889vw;
    font-size: 5vw;
  }
}
</style>